<template>
  <div class="forminput">
    <div class="forminput_input">
      <i>{{ title }}</i
      ><input
        type="text"
        v-model="adUrl"
        :placeholder="placeholder"
        class="forminput_url_text"
        :disabled="disabled"
      />
    </div>
  </div>
</template>
<script>
export default {
  name: "FormInput",
  props: {
    disabled: {
      type: Boolean,
      default() {
        return false;
      },
    },
    title: {
      type: String,
      default() {
        return "";
      },
    },
    placeholder: {
      type: String,
      default() {
        return "";
      },
    },
    parentAdUrl: {
      type: String,
      default() {
        return "";
      },
    },
  },
  data() {
    return {
      adUrl: "",
    };
  },
  created() {
    this.adUrl = this.$props.parentAdUrl;
  },
  watch: {
    adUrl(v) {
      this.$emit("updateValue", v);
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.forminput {
  .forminput_input {
    display: block;
    border: 1 / @base solid #efefef;
    border-radius: 5 / @base;
    margin: 0 0 5 / @base 0;
    i {
      font-style: normal;
      font-size: 14 / @base;
      padding: 10 / @base 0 10 / @base 10 / @base;
      overflow: hidden;
      word-break: break-all;
      display: block;
    }
    input {
      &.forminput_url_text {
        display: block;
        font-size: 14 / @base;
        padding: 10 / @base;
        border: 0;
        width: 224 / @base;
      }
    }
  }
}
</style>
